<template>
  <div class="order-wrapper">
    <div class="top">
      <div class="title-wrapper">
        <div class="title">订单列表</div>
      </div>
      <el-button type="primary" @click="exportOrderClick">导出excle</el-button>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="待发货" name="first">
        <template v-if="activeName === 'first'">
          <condition-cmp @search="handleSearch" @datePicker="handleDatePicker" />
          <table-list :list="list" :status="status" @success="handleSuccess" />
        </template>
      </el-tab-pane>
      <el-tab-pane label="待付款" name="second">
        <template v-if="activeName === 'second'">
          <condition-cmp @search="handleSearch" @datePicker="handleDatePicker" />
          <table-list :list="list" :status="status" @success="handleSuccess" />
        </template>
      </el-tab-pane>
      <el-tab-pane label="待收货" name="third">
        <template v-if="activeName === 'third'">
          <condition-cmp @search="handleSearch" @datePicker="handleDatePicker" />
          <table-list :list="list" :status="status" @success="handleSuccess" />
        </template>
      </el-tab-pane>
      <el-tab-pane label="交易完成" name="fourth">
        <template v-if="activeName === 'fourth'">
          <condition-cmp @search="handleSearch" @datePicker="handleDatePicker" />
          <table-list :list="list" :status="status" @success="handleSuccess" />
        </template>
      </el-tab-pane>
      <el-tab-pane label="交易关闭" name="fifth">
        <template v-if="activeName === 'fifth'">
          <condition-cmp @search="handleSearch" @datePicker="handleDatePicker" />
          <table-list :list="list" :status="status" @success="handleSuccess" />
        </template>
      </el-tab-pane>
    </el-tabs>
    <Pagination
      class="pagination"
      :total="total"
      :page-size="pageSize"
      :cur-page="currentPage"
      @nextPage="handleNextPage"
    />
  </div>
</template>
<script>
import ConditionCmp from './order/conditionCmp'
import TableList from './order/tableList'
import Pagination from '@/common/pagination'
import { getClusterOrderList } from '@/api/seckill'
const ERR_OK = 200
export default {
  components: {
    ConditionCmp,
    TableList,
    Pagination
  },
  data() {
    return {
      activeName: 'first',
      currentPage: 1,
      total: 0,
      pageSize: 10,
      list: [],
      query: '',
      start_time: '',
      end_time: '',
      status: 2
    }
  },
  created() {
    this._getClusterOrderList({ page: this.currentPage, status: this.status })
  },
  methods: {
    exportOrderClick() {
      // 导出订单
      const api = process.env.VUE_APP_BASE_API
      window.location.href = `${api}back/spellActive/spellActive?type=exportOrder&status=${this.status}&keyword=${this.keyword}`
    },
    tabSwitch(start_time, end_time) {
      switch (this.activeName) {
        case 'first':
          this.status = 2
          this._getClusterOrderList({
            page: this.currentPage,
            status: this.status,
            keyword: this.query,
            start_time: this.start_time,
            end_time: this.end_time
          })
          break
        case 'second':
          this.status = 0
          this._getClusterOrderList({
            page: this.currentPage,
            status: this.status,
            keyword: this.query,
            start_time: this.start_time,
            end_time: this.end_time
          })
          break
        case 'third':
          this.status = 3
          this._getClusterOrderList({
            page: this.currentPage,
            status: this.status,
            keyword: this.query,
            start_time: this.start_time,
            end_time: this.end_time
          })
          break
        case 'fourth':
          this.status = 1
          this._getClusterOrderList({
            page: this.currentPage,
            status: this.status,
            keyword: this.query,
            start_time: this.start_time,
            end_time: this.end_time
          })
          break
        case 'fifth':
          this.status = -1
          this._getClusterOrderList({
            page: this.currentPage,
            status: this.status,
            keyword: this.query,
            start_time: this.start_time,
            end_time: this.end_time
          })
          break
      }
    },
    handleSuccess() {
      this.currentPage = 1
      this.tabSwitch()
    },
    handleSearch(query) {
      this.query = query
      this.currentPage = 1
      this.tabSwitch()
    },
    handleDatePicker(time) {
      if (time) {
        this.start_time = time[0]
        this.end_time = time[1]
      } else {
        this.start_time = ''
        this.end_time = ''
      }
      this.tabSwitch()
    },
    handleClick(tab, event) {
      this.list = []
      this.query = ''
      this.currentPage = 1
      this.start_time = ''
      this.end_time = ''
      this.tabSwitch()
    },
    handleNextPage(page) {
      this.currentPage = page

      this.tabSwitch()
    },
    _getClusterOrderList({ page, status, start_time, end_time, keyword }) {
      getClusterOrderList({ page, status, start_time, end_time, keyword })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res, 'res')
            this.list = this.formatData(res.data.list)
            this.total = res.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 处理数据
    formatData(list) {
      const arr = []
      list.forEach((item, index) => {
        for (let i = 0; i <= 2; i++) {
          arr.push(item)
        }
      })
      return arr
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
.order-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  margin-top: 20px;
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}
</style>
